<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="lib/react.development.js"></script>
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
    <style>
    .list{
        text-decoration: line-through
    }
    </style>
</head>
<body>
  <div id="app"></div>  
</body>
<script type="text/babel">
class TodoList extends React.Component{
    constructor(props){
        super(props)
        this.state={
        todos:[
            {task:"吃早饭",done:false},
            {task:"背面试题",done:false},
            {task:"上课",done:false}
    ]
    }
    this.addTaskInp=React.createRef()
    }
    doTask(e,item){
       var todos=this.state.todos.map((todo,index)=>{
           if(todo===item){
             return {task:todo.task,done:e.target.checked}
           }
           else{
             return todo
           }
       }) 
       this.setState({
           todos:todos
       })
    }
    addTask(e){
        var taskText=this.addTaskInp.current.value
        var todos=[...this.state.todos,{task:taskText,done:false}]
        this.setState({
           todos:todos
       }) 
    }
    render(){
        var doCount=0
        let list=this.state.todos.map((item,index)=>{
           if(item.done){
            doCount++
           }
        return <li className={item.done?"list":""}>
            {item.task}
            <input type="checkbox" onClick={(e)=>this.doTask(e,item)}/>
            </li>
         })
        return (
            <div>
                <input type="text" ref={this.addTaskInp}/>
                <button onClick={e=>this.addTask()}>新增任务</button>
                <ul>{list}</ul>
                <span>未做件数:{this.state.todos.length-doCount}</span>
                <span>已做件数:{doCount}</span>
            </div>
            )
    }

}
ReactDOM.render(<TodoList/>,document.getElementById("app"))
</script>
</html>